<template>
    <div class="page-container">
        <div class="page-layout">
            <div class="page-layout-header">
                <div class="header-aside flex-start-title">
                    <div class="title">{{ $t('platform.config.betting.titleSide') }}</div>
                    <div class="option">
                        <div class="icon" :title="$t('platform.config.betting.dialog.sync')" @click="dialog.visible.sync = true">
                            <i class="el-icon-document-copy"></i>
                        </div>
                    </div>
                </div>
                <div class="header-main">
                    <div class="title">{{ $t('platform.config.betting.title') }}</div>
                </div>
            </div>
            <div class="page-layout-body">
                <div class="body-aside">
                    <!--平台列表-->
                    <component-page-org-tree init-first-node @click="treeSelectNode"></component-page-org-tree>
                </div>
                <div class="body-main flex flex-col" v-if="tree.id != null" v-loading="loading">
                    <div class="page-filter-option">
                        <el-form :inline="true" :model="filterOption" class="flex flex-wrap">
                            <el-form-item>
                                <component-page-game-option v-model="filterOption.game_id" @change="filterChange"></component-page-game-option>
                            </el-form-item>
                            <el-form-item>
                                <el-button @click="filterChange">{{ $t('action.search') }}</el-button>
                            </el-form-item>
                            <el-form-item class="ml-auto mr-0">
                                <el-button type="primary" plain icon="el-icon-plus" @click="dialogItemEdit">{{ $t('action.edit') }}</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="list-space"></div>
                    <div class="page-container-inner-fluid flex-auto flex flex-col">
                        <component-page-content-resize v-slot="{ content }">
                            <el-table style="width: 100%" :height="content.height"
                                      :data="dataList"
                                      :default-sort="{prop: filterOption.order_column, order: filterOption.order_key}"
                                      @sort-change="filterOrderChange"
                                      highlight-current-row>
                                <el-table-column min-width="200" :label="$t('game.setting.game.name')" prop="game_id">
                                    <template slot-scope="scope">
                                        <component-page-games :game-code="scope.row.game_id"></component-page-games>
                                    </template>
                                </el-table-column>

                              <el-table-column min-width="150" :label="$t('game.config.currency.type')" prop="type">
                                <template slot-scope="scope">
                                  <div v-if="scope.row.config.globals != null && scope.row.config.globals.bet_type != 2">
                                    {{ $t('game.data.settlement.bet_type.1.label') }}
                                  </div>
                                  <div v-else>
                                    {{ $t('game.data.settlement.bet_type.2.label') }}
                                  </div>
                                </template>
                              </el-table-column>

                              <el-table-column min-width="350" :label="$t('platform.config.betting.config.title')">
                                  <template slot-scope="scope">
                                    <div v-if="scope.row.config.globals != null">
                                        <div v-if="scope.row.config.globals.bet != null">
                                          <div v-for="item in scope.row.config.globals.bet">
                                            {{ item.currency != '_USD' ? item.currency : $t('platform.config.betting.config.virtual') }} : {{ item.gear }}
                                          </div>
                                        </div>

                                    </div>
                                  </template>
                              </el-table-column>

                                <el-table-column min-width="220" :label="$t('platform.config.betting.updated')" prop="updated" sortable="custom" :sort-orders="['descending', 'ascending']">
                                    <template slot-scope="scope">
                                        <component-page-timestamp :timestamp="scope.row.updated"></component-page-timestamp>
                                    </template>
                                </el-table-column>
                                <el-table-column width="100" :label="$t('platform.config.betting.operation')" align="right" fixed="right">
                                    <template slot-scope="scope">
                                        <span class="operation-options-icon">
                                            <i class="el-icon-copy-document" @click="dialogItemCover(scope)"></i>
                                        </span>
                                        <span class="operation-options-icon">
                                            <i class="el-icon-edit-outline" @click="dialogItemUpdate(scope)"></i>
                                        </span>
                                        <span class="operation-options-icon">
                                            <i class="el-icon-delete" @click="dialogItemDestroy(scope)"></i>
                                        </span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </component-page-content-resize>
                        <div class="text-right p-4">
                            <el-pagination background layout="total, sizes, prev, pager, next, jumper"
                                           :current-page="filterOption.page"
                                           :page-size.sync="filterOption.page_size"
                                           :total="dataMeta.total"
                                           @size-change="filterChange"
                                           @current-change="filterPageChange">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog :title="$t('platform.config.betting.dialog.destroy')" center width="320px" :visible.sync="dialog.visible.destroy">
            <div class="text-center" v-html="$t('confirm.config', { status: $t('action.delete') })"></div>
            <div slot="footer">
                <el-button type="danger" @click="destroy">{{ $t('action.confirm') }}</el-button>
                <el-button @click="dialog.visible.destroy = false">{{ $t('action.cancel') }}</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="$t('platform.config.betting.dialog.cover')" center width="330px" :visible.sync="dialog.visible.cover" >
            <div class="text-center mb-3" @click="getBetStatus">{{ $t('platform.config.betting.cover.desc') }}</div>
            <div class="text-center" v-html="$t('confirm.config', { status: $t('action.cover') })"></div>

            <div class="text-center">
                <component-page-loading :status="betStatus_copy" @reload="getBetStatus"
					v-if="betStatus_copy != 'dle'">
                </component-page-loading>
              <el-select v-else :disabled="!bet_status_copy" v-model="value"
                :placeholder="$t('game.config.currency.type')">
                <el-option
                    v-for="(item, index) in $t('game.data.settlement.bet_type')"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </div>

            <div slot="footer">
                <el-button type="danger" @click="fullDefaultBets">{{ $t('action.confirm') }}</el-button>
                <el-button @click="dialog.visible.cover = false">{{ $t('action.cancel') }}</el-button>
            </div>
        </el-dialog>
        <item-edit :visible.sync="dialog.visible.edit" :org="tree" :data="itemCache" @edit="filterChange"></item-edit>
        <item-sync :visible.sync="dialog.visible.sync"></item-sync>
    </div>
</template>

<script>
import ItemEdit from './ItemEdit.vue'
import ItemSync from './ItemSync.vue'

export default {
    components: {
        ItemEdit,
        ItemSync,
    },
    data() {
        return {
            bet_status:null,
            bet_status_copy:null,
            bet_type:null,
            value:'',
            tree: {},
            loading: false,
            filterOption: {
                plat_code: null,
                game_id: '',
                page: 1,
                page_size: 30,
                order: 'desc',
                order_key: 'descending',
                order_column: 'updated',
            },
            dataMeta: {
                total: 0,
            },
            dataList: [],
            itemCache: {},
            dialog: {
                visible: {
                    edit: false,
                    destroy: false,
                    cover: false,
                    sync: false,
                }
            },
            betStatus: 'dle',
            betStatus_copy:'del'
            // betStatus : 'dle'
        }
    },
    methods: {
        //  获取选中游戏的 bet_status
        getBetStatus() {
            this.betStatus = 'loading';
            // 发起 Ajax 请求
            axios.get('/game/config/betting/getGameDetails', {
                params: {game_id: this.itemCache.game_id}
            }).then(response => {
                // 处理响应数据
                if (response.data.resp_msg.code == 200) {
                    this.bet_status = response.data.resp_data.bet_status;
                    this.bet_type = response.data.resp_data.bet_status == 0 ? 1 : null;
                    this.betStatus = 'dle';
                } else {
                    this.betStatus = 'error';
                }
            })
        },
        treeSelectNode(data) {
            // 缓存数据
            this.tree = data;
            // 平台筛选
            this.filterOption.plat_code = data.code;
            // 初始化数据
            this.filterChange();
        },
        clearFilterOption() {
            this.loading = true;
            this.filterOption.page = 1;
        },
        filterChange() {
            this.clearFilterOption();
            this.getDataList();
        },
        filterPageChange(page) {
            this.loading = true;
            this.filterOption.page = page;
            this.getDataList();
        },
        filterOrderChange(scope) {
            this.clearFilterOption();
            this.filterOption.order = scope.order == 'ascending' ? 'asc' : 'desc';
            this.filterOption.order_key = scope.order;
            this.filterOption.order_column = scope.prop;
            this.getDataList();
        },
        getDataList() {
            axios.get('/platform/config/betting/getList', {
                params: this.filterOption
            }).then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.dataMeta = response.data.resp_data.meta;
                    this.dataList = response.data.resp_data.data;
                } else {
                    this.$message({
                        type: 'error',
                        message: response.data.resp_msg.message,
                        showClose: true
                    });
                }
                this.loading = false;
            })
        },
        // 使用默认投注配置覆盖平台投注配置
        fullDefaultBets() {
            // 关闭提示框
            this.dialog.visible.cover = false;
            // loading 状态 start
            let loading = this.$loading();
            // 保存数据
            axios.post('/platform/config/betting/fullDefaultBets', {
                plat_code: this.itemCache.plat_code,
                game_id: this.itemCache.game_id,
                bet_type:this.value,
            }).then((response) => {
                // loading 状态 close
                loading.close();
                // 逻辑处理
                if (response.data.resp_msg.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('messages.succeeded', {status: this.$t('action.cover')}),
                        showClose: true
                    });
                    // 显示更新
                    this.filterChange();
                } else {
                    this.$message({
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: this.$t('messages.failed', {status: this.$t('action.cover')}) + `<div class="mt-2">${response.data.resp_msg.message}</div>`,
                        showClose: true
                    });
                }
            })
        },
        // 删除数据
        destroy() {
            // 关闭提示框
            this.dialog.visible.destroy = false;
            // loading 状态 start
            let loading = this.$loading();
            // 保存数据
            axios.post('/platform/config/betting/destroy', {
                id: this.itemCache.id
            }).then((response) => {
                // loading 状态 close
                loading.close();
                // 逻辑处理
                if (response.data.resp_msg.code == 200) {
                    this.$message({
                        type: 'success',
                        message: this.$t('messages.succeeded', {status: this.$t('action.delete')}),
                        showClose: true
                    });
                    // 刷新列表
                    this.filterChange();
                } else {
                    this.$message({
                        type: 'error',
                        dangerouslyUseHTMLString: true,
                        message: this.$t('messages.failed', {status: this.$t('action.delete')}) + `<div class="mt-2">${response.data.resp_msg.message}</div>`,
                        showClose: true
                    });
                }
            })
        },
        // 显示模态框（新增/覆盖）
        dialogItemEdit() {
            // 缓存数据
            this.itemCache = null;
            // 显示模态框
            this.dialog.visible.edit = true;
        },
        // getBetStatus(){},
        // 显示模态框（编辑）
        dialogItemUpdate(scope) {
            // 缓存数据
            this.itemCache = scope.row;

            // 显示模态框
            this.dialog.visible.edit = true;
        },
        // 显示模态框（覆盖）
        dialogItemCover(scope) {
            // 缓存数据
            this.itemCache = scope.row;
            this.betStatus_copy = 'loading';
            if(this.itemCache.config.globals!=null&&this.itemCache.config.globals.bet_type!=2){
				this.value = 1
			}else{
				this.value = 2
			}
            // 发起 Ajax 请求
			axios.get('/game/config/betting/getGameDetails', {
				params: {game_id: scope.row.game_id}
			}).then(response => {
				// 处理响应数据

				if (response.data.resp_msg.code == 200) {
					// 源系统
					// 新增时初始化投注类型
					this.bet_status_copy= response.data.resp_data.bet_status;

					this.betStatus_copy = 'dle';
				} else {
					this.betStatus_copy = 'error';
				}

			})
            // 显示模态框
            this.dialog.visible.cover = true;
        },
        // 显示模态框（删除）
        dialogItemDestroy(scope) {
            // 缓存数据
            this.itemCache = scope.row;
            // 显示模态框
            this.dialog.visible.destroy = true;
        },
    }
}
</script>

<style lang="scss" scoped>
.header-aside .icon {
    flex-shrink: 0;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    color: $font-color-third;
}

.header-aside .icon:hover {
    color: $font-color-second;
}
</style>
